<template>
  <div class='container'>
    <div class="articles-container">
      <el-card>
        <!--        顶部搜索框-->
         <el-row type="flex">
        <el-col >
           <el-form :inline="true" :model="page" class="demo-form-inline" ref="searchRef">
             <el-form-item label="关键字" style="margin-left: 20px">
        <el-input v-model="page.keyword" placeholder="根据文章标题搜索"></el-input>
      </el-form-item>
      <el-form-item label="状态" style="margin-left: 30px">
        <el-select v-model="page.state" placeholder="请选择">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="resetForm">清除</el-button>
        <el-button type="primary" size="mini" @click="searchBtn">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-col>
  <el-col :span="6">
    <el-row type="flex" justify="end">
      <el-col :span="12">
        <el-button icon="el-icon-edit" type="success" size="small" @click="addArtitcleBtn">新增技巧</el-button>
      </el-col>
    </el-row>
  </el-col>
</el-row>
        <el-alert
          :title="`数据一共${page.counts}条`"
          type="info"
          show-icon
        style="margin-bottom: 10px"
          :closable="false">
        </el-alert>
<!--        表格组件-->
          <el-table
            style="width: 100%" :data="list"
            v-loading="loading">
            <el-table-column
              label="序号"
              type="index"
              width="80">
            </el-table-column>
            <el-table-column
              label="文章标题"
              width="400">
              <template v-slot="{row}">
                {{row.title}}<i @click="showVideoBtn(row.videoURL)" class="el-icon-video-camera" v-if="row.videoURL" style="color: #01c6fa;margin-left: 5px"></i>
              </template>
            </el-table-column>
            <el-table-column
              label="阅读数"
            prop="visits">
            </el-table-column>
            <el-table-column
              label="录入人"
              prop="username"
            >
            </el-table-column>
            <el-table-column
              label="录入时间"
            >
              <template v-slot="{row}">
               {{row.createTime | parseTimeByString}}
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              width="100"
            prop="state">
              <template v-slot="{row}">
                {{row.state===1?'已启用':'已禁用'}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="180">
              <template v-slot="{row}">
                <el-button type="text" @click="showArticle(row.id,row.username)">预览</el-button>
                <el-button type="text" @click="changeState(row.id,row.state)">{{row.state===1?'禁用':'启用'}}</el-button>
                <el-button type="text" :disabled="(row.state===1)" @click="editBtn(row.id)">修改</el-button>
                <el-button type="text" :disabled="(row.state===1)" @click="delBtn(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
<!--        分页区域-->
       <el-row type="flex" justify="end">
         <el-row>
           <el-pagination
           @size-change="changeSize"
           @current-change="changePage"
           :current-page="page.page"
           :page-sizes="[5, 10, 20, 50]"
           :page-size="page.pagesize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="page.counts">
         </el-pagination>
         </el-row>
       </el-row>
      </el-card>
<!--文章详情-->
      <ArticlesPreview :articlesShow.sync="articlesShow" ref="articleEdit" :currentUsername="currentUsername"/>
<!--      新增弹层-->
      <ArticlesAdd :dialogVisible.sync="dialogVisible" :diaTitle="diaTitle" ref="addArticle" @getlist="getlist"/>
<!--      播放器组件-->
      <el-dialog
        :visible.sync="showVideo"
        title="视频"
        width="55%"
        destroy-on-close
      >
        <Video :previewVideoUrl="previewVideoUrl"/>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { changeState, list, remove } from '@/api/hmmm/articles'
import ArticlesAdd from '@/module-hmmm/components/articles-add'
import ArticlesPreview from '@/module-hmmm/components/articles-preview'
import Video from '@/module-hmmm/components/video'

export default {
  components: {
    ArticlesAdd,
    ArticlesPreview,
    Video
  },
  data () {
    return {
      previewVideoUrl: null,
      showVideo: false,
      currentUsername: null,
      loading: false,
      articlesShow: false,
      diaTitle: '添加技巧',
      page: {
        page: 1,
        pagesize: 10,
        keyword: null,
        state: null,
        counts: null,
        pages: null
      },
      dialogVisible: false,
      list: []
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    showVideoBtn (Url) {
      this.showVideo = true
      console.log(Url)
      this.previewVideoUrl = Url
    },
    editBtn (id) {
      this.diaTitle = '修改文章'
      this.dialogVisible = true
      this.$refs.addArticle.getArticleDetail(id)
    },
    // 添加按钮
    addArtitcleBtn () {
      this.diaTitle = '添加技巧'
      this.dialogVisible = true
    },
    // 预览按钮
    showArticle (id, username) {
      this.articlesShow = true
      this.$refs.articleEdit.getArticle(id)
      this.currentUsername = username
    },
    async delBtn (id) {
      try {
        await this.$confirm('确认删除')
        await remove({ id: id })
        this.$message.success('删除成功')
        await this.getlist()
      } catch (e) {
        this.$message.error('删除失败')
      }
    },
    async changeState (id, state) {
      console.log(id, state)
      try {
        await changeState({
          id: id,
          state: state === 1 ? 0 : 1
        })
        this.$message.success('更新状态成功')
        await this.getlist()
      } catch (e) {
        console.log(e)
      }
    },
    searchBtn () {
      this.page.page = 1
      this.getlist()
    },
    resetForm () {
      this.page.keyword = null
      this.page.state = null
      this.$refs.searchRef.resetFields()
    },
    async getlist () {
      this.loading = true
      const { data } = await list(this.page)
      this.loading = false
      this.list = data.items
      this.page.counts = data.counts
    },
    changePage (e) {
      this.page.page = e
      this.getlist()
    },
    changeSize (e) {
      this.page.pagesize = e
      this.getlist()
    }
  }
}
</script>

<style scoped lang='less'>
.articles-container{
  padding: 10px;
}
</style>
